/** @format */
@import "@/theme/utils";
.friend {
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .reload {
      cursor: pointer;
    }
  }
  .container {
    display: flex;
    justify-content: space-between;

    .left {
      flex: 1;
      overflow-x: hidden;
      overflow-y: scroll;
      height: calc(100vh - 200px);
      padding-right: 12px;
      .loading {
        position: fixed;
      }
    }

    .right {
      width: 250px;
      display: flex;
      justify-content: center;
    }
  }
  .left {
    .name {
      cursor: pointer;
      font-weight: normal;
    }
    .dinamicContent {
      padding-left: 56px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      .imgGroup {
        width: 100%;
        align-items: flex-start;
        margin: 12px 0;
        img {
          width: 200px;
          border-radius: 5%;
        }
      }
      .from {
        text-align: right;
        width: 100%;
      }
      .song {
        display: flex;
        background-color: #f5f5f5;
        width: 100%;
        border-radius: 5px;
        padding: 12px;
        &:hover {
          background-color: #ededed;
          .playIcon {
            opacity: 1;
          }
        }
        .content {
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: space-between;
        }
        .img {
          width: 50px;
          position: relative;
          margin-right: 12px;
          img {
            width: 100%;
            border-radius: 5%;
          }
        }
      }
    }
  }

  .right {
    .divider {
      height: 100%;
      margin-right: 10px;
    }
    .hotTopic {
      width: 100%;
      .item {
        cursor: pointer;
        .meta {
          align-items: center;
          .title {
            display: inline-block;
            @include ellipsis()
          }
        }
      }
    }
  }
}

:global {
  ._dynamic {
    ._dynamicItem {
      padding: 14px 0 14px 0;
      &:nth-child(1) {
        padding: 0 0 14px 0;
      }
      .ant-list-item-meta {
        align-items: center;
      }

      .ant-list-item-meta,
      .ant-list-item-meta-title,
      .ant-list-item-action {
        margin: 0;
      }
      .ant-list-item-action {
        text-align: right;
        margin-top: 12px;
      }
    }
  }
}
